<!--
 * @Description: 分页表格
 * @Autor: xiukun@herry
 * @Date: 2021-03-11 10:05:08
 * @LastEditors: xiukun@herry
 * @LastEditTime: 2021-03-11 10:21:06
-->
<template>
    <div>
        <el-alert effect="dark" :closable="false" title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 分页表格" type="info" style="margin-bottom: 20px;" />
        <com-table v-loading="loading" :columns="columns" :data="tableData" :pagination="{
        currentPage: 1,
        total: 400,
        onSizeChange: handleSizeChange,
        onCurrentChange: handleCurrentChange
      }" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

const columns = [
    {
        field: 'date',
        label: '日期'
    },
    {
        field: 'name',
        label: '姓名'
    },
    {
        field: 'address',
        label: '地址'
    }
];

const tableData = [
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
    },
    {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
    },
    {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
    },
    {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
    }
];

export default defineComponent({
    // name: 'PageTable',
    setup() {
        const loading = ref<boolean>(true);
        setTimeout(() => {
            loading.value = false;
        }, 1000);

        function handleSizeChange(val: number) {
            console.log(val);
        }

        function handleCurrentChange(val: number) {
            console.log(val);
        }

        return {
            columns,
            tableData,
            loading,
            handleSizeChange,
            handleCurrentChange
        };
    }
});
</script>

<style>
</style>
